<template>
  <!-- <div class="container-home__header">
    <el-button v-if="isEdit" @click="cancleDrag">取消</el-button>
    <el-button v-if="!isEdit" @click="isEdit = !isEdit" type="primary">编辑</el-button>
    <el-button v-if="isEdit" @click="isEdit = !isEdit" type="primary">保存</el-button>
  </div> -->
  <el-tooltip class="box-item" effect="customized" content="选择组件" placement="bottom">
    <OyButton
      class="container-home__edit"
      iconBtnName="icon-xiugai"
      circle
      color="#FFF3F3"
      @click="isEdit = true"
    ></OyButton>
  </el-tooltip>

  <div class="container-home">
    <div
      id="content"
      class="container-home__grids"
      :class="{ 'container-home__grids--edit': isEdit }"
    >
      <grid-layout
        ref="gridlayout"
        :layout.sync="layout"
        :col-num="12"
        :row-height="30"
        :is-draggable="true"
        :is-resizable="true"
        :vertical-compact="true"
        :use-css-transforms="true"
        @layout-updated="layoutUpdatedEvent"
      >
        <grid-item
          :key="item.i"
          v-for="(item, index) in layout"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
        >
          <OyButton
            v-if="isEdit"
            class="container-home__delete"
            iconBtnName="icon-guanbidangqianbiaoqianye"
            circle
            color="#FFF3F3"
            @click="handleDelete(item, index)"
          ></OyButton>
          <span v-if="item.i != 'drop'" class="text">{{ item.i }}</span>
        </grid-item>
      </grid-layout>
    </div>
    <div v-if="isEdit" class="custom-modal">
      <div class="modal-header">
        <div class="modal-title">选择组件</div>
        <OyButton
          iconBtnName="icon-guanbidangqianbiaoqianye"
          circle
          text
          small
          @click="isEdit = false"
        ></OyButton>
      </div>
      <div class="modal-content common-scrollbar">
        <el-select v-model="cardType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input class="margin-top20" v-model="cardSearch" placeholder="请输入"> </el-input>
        <template v-for="item in dragList" :key="item">
          <div
            @drag="drag(item)"
            @dragend="dragend(item)"
            class="card-item"
            draggable="true"
            unselectable="on"
          >
            <div class="card-item__title">
              {{ item.title }}
            </div>
            <el-image
              class="card-item__img"
              :src="item.url[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="item.url"
              :initial-index="4"
              fit="cover"
            />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'
import OyButton from '@/components/OyButton.vue'

let mouseXY = { x: null, y: null }
let DragPos = { x: null, y: null, w: 1, h: 1, i: null }

export default {
  components: {
    GridLayout,
    GridItem,
    OyButton,
  },
  data() {
    return {
      isEdit: false,
      options: [
        {
          value: '1',
          label: '消息类',
        },
        {
          value: '2',
          label: '指标类',
        },
      ],
      cardType: '1',
      cardSearch: '',
      layout: [
        { x: 0, y: 0, w: 4, h: 6, i: '0' },
        { x: 4, y: 0, w: 4, h: 6, i: '1' },
        { x: 8, y: 0, w: 4, h: 6, i: '2' },
        { x: 0, y: 6, w: 12, h: 8, i: '3' },
        { x: 0, y: 14, w: 4, h: 6, i: '4' },
        { x: 4, y: 14, w: 8, h: 6, i: '5' },
        // { x: 0, y: 5, w: 2, h: 5, i: '6' },
        // { x: 2, y: 5, w: 2, h: 5, i: '7' },
        // { x: 4, y: 5, w: 2, h: 5, i: '8' },
        // { x: 5, y: 10, w: 4, h: 3, i: '9' },
      ],
      dragList: [
        {
          w: 4,
          h: 6,
          i: 'drop-0',
          title: '我的任务',
          url: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'],
        },
        {
          w: 6,
          h: 6,
          i: 'drop-1',
          title: '待办事项',
          url: ['https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'],
        },
        {
          w: 8,
          h: 6,
          i: 'drop-2',
          title: '快速开始 / 便捷导航',
          url: ['https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'],
        },
        {
          w: 12,
          h: 6,
          i: 'drop-3',
          title: '客户总览',
          url: ['https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'],
        },
        // { w: 8, h: 4, i: 'drop-4', title: '我的任务' },
        // { w: 4, h: 4, i: 'drop-5', title: '我的任务' },
      ],
    }
  },
  mounted() {
    document.addEventListener(
      'dragover',
      function (e) {
        mouseXY.x = e.clientX
        mouseXY.y = e.clientY
      },
      false
    )
  },
  methods: {
    drag: function (e) {
      let parentRect = document.getElementById('content').getBoundingClientRect()
      let mouseInGrid = false
      if (
        mouseXY.x > parentRect.left &&
        mouseXY.x < parentRect.right &&
        mouseXY.y > parentRect.top &&
        mouseXY.y < parentRect.bottom
      ) {
        mouseInGrid = true
      }
      if (mouseInGrid === true && this.layout.findIndex((item) => item.i === 'drop') === -1) {
        this.layout.push({
          x: (this.layout.length * 2) % (this.colNum || 12),
          y: this.layout.length + (this.colNum || 12), // puts it at the bottom
          w: e.w,
          h: e.h,
          i: 'drop',
        })
      }
      let index = this.layout.findIndex((item) => item.i === 'drop')
      if (index !== -1) {
        // try {
        //   console.log('----', this.layout, index)
        //   this.$refs.gridlayout.$children[this.layout.length].$refs.item.style.display = 'none'
        // } catch {}
        // let el = this.$refs.gridlayout.$children[index]
        // el.dragging = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }
        // let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
        let new_pos = { x: 0, y: 0 }
        new_pos.x = Math.floor(((mouseXY.x - parentRect.left) / parentRect.width) * 12)
        new_pos.y = Math.floor(((mouseXY.y - parentRect.top) / parentRect.height) * 12)
        if (mouseInGrid === true) {
          this.$refs.gridlayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, e.w, e.h)
          DragPos.i = String(index)
          DragPos.x = this.layout[index].x
          DragPos.y = this.layout[index].y
        }
        if (mouseInGrid === false) {
          this.$refs.gridlayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, e.w, e.h)
          this.layout = this.layout.filter((obj) => obj.i !== 'drop')
        }
      }
    },
    dragend: function (e) {
      let parentRect = document.getElementById('content').getBoundingClientRect()
      let mouseInGrid = false
      if (
        mouseXY.x > parentRect.left &&
        mouseXY.x < parentRect.right &&
        mouseXY.y > parentRect.top &&
        mouseXY.y < parentRect.bottom
      ) {
        mouseInGrid = true
      }
      if (mouseInGrid === true) {
        // alert(`Dropped element props:\n${JSON.stringify(DragPos, ['x', 'y', 'w', 'h'], 2)}`)
        this.$refs.gridlayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, e.w, e.h)
        this.layout = this.layout.filter((obj) => obj.i !== 'drop')

        // UNCOMMENT below if you want to add a grid-item

        this.layout.push({
          x: DragPos.x,
          y: DragPos.y,
          w: e.w,
          h: e.h,
          i: DragPos.i,
        })
        // this.layoutUpdatedEvent(this.layout)
        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x, DragPos.y, e.w, e.h)
        // try {
        //   this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display = 'block'
        // } catch {}
      }
    },
    cancleDrag() {
      this.isEdit = !this.isEdit
      console.log('cancleDrag', this.layout)
      // this.layout = this.layout.filter((obj) => obj.i.indexOf('drop') === -1)
      this.layout = [
        { x: 0, y: 0, w: 2, h: 2, i: '0' },
        { x: 2, y: 0, w: 2, h: 4, i: '1' },
        { x: 4, y: 0, w: 2, h: 5, i: '2' },
        { x: 6, y: 0, w: 2, h: 3, i: '3' },
        { x: 8, y: 0, w: 2, h: 3, i: '4' },
        { x: 10, y: 0, w: 2, h: 3, i: '5' },
        { x: 0, y: 5, w: 2, h: 5, i: '6' },
        { x: 2, y: 5, w: 2, h: 5, i: '7' },
        { x: 4, y: 5, w: 2, h: 5, i: '8' },
      ]
    },
    layoutUpdatedEvent: function (newLayout) {
      console.log('Updated layout: ', newLayout)
      // this.layout = newLayout
      // this.$set(this, 'layout', newLayout)
    },
    handleDelete(item, index) {
      this.layout.splice(index, 1)
      console.log('handleDelete', item, index)
    },
  },
}
</script>

<style lang="less" scoped>
.container-home__edit {
  position: fixed;
  top: 110px;
  right: 30px;
  z-index: 99;
  width: 50px;
}
.container-home__header {
  display: flex;
  justify-content: flex-end;
  button {
    margin: 0 6px;
  }
}
.container-home {
  display: flex;
  .container-home__grids {
    // flex: 1;
    width: 100%;
  }
  .container-home__grids--edit {
    width: calc(100% - 190px);
  }
  .container-home__drags {
    padding: 0 20px;
    width: 200px;
  }
}
.droppable-element {
  width: 100%;
  text-align: center;
  background: #fdd;
  border: 1px solid black;
  margin: 10px 0;
  padding: 10px;
  // height: 200px;
}

.vue-grid-layout {
  background: #eee;
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: white;
  border-radius: 6px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}

.vue-grid-item .resizing {
  opacity: 0.9;
}

.vue-grid-item .static {
  background: #cce;
}

.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}

.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

.columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}
.container-home__delete {
  position: absolute;
  top: -12px;
  right: -12px;
  scale: 0.85;
  z-index: 2;
}
.custom-modal {
  position: fixed;
  top: 0;
  right: 0;
  width: 220px;
  height: 100%;
  background-color: white;
  z-index: 999;
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    padding: 2px 16px;
    .modal-title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: bold;
    }
    button {
      scale: 0.85;
      margin-right: -8px;
    }
  }
  .modal-content {
    padding: 8px 8px 50px;
    height: 100%;
    overflow-y: auto;
  }
}
.card-item {
  width: 100%;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 6px;
  background: #fafafa;
  .card-item__title {
    padding: 5px 10px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
  }
  .card-item__img {
    width: 100%;
  }
}

.drawer-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}
</style>
